$(function() {

  // 1. 获取 id 和 token
  const id = window.sessionStorage.getItem('id')
  const token = window.sessionStorage.getItem('token')

  // 1. 验证登录并渲染 header
  testLogin()
  async function testLogin() {
    // 1-1. 判断 token 和 id 是否存在
    if (!token || !id) return window.location.href = './login.html'

    // 1-2. 发送请求请求用户个人信息
    const res = await $.ajax({
      url: 'http://localhost:8080/users/info/' + id,
      headers: { authorization: token }
    })

    // 1-3. 有可能失败有可能成功
    if (res.code === 1) {
      return $('.nickname').text(res.info.nickname)
    }

    // 1-4. 用户未登录, 跳转至登录页
    window.location.href = './login.html'
  }
  
  // 2. 根据 id 获取当前用户信息, 并渲染模板
  const user_id = window.sessionStorage.getItem('current_user_id')
  getUserInfo()
  async function getUserInfo () {
    const res = await $.ajax({
      url: 'http://localhost:8080/person/info/' + user_id,
      headers: { 'authorization': token }
    })
    if (res.code === 1) {
      // 根据获取的用户信息填充表单
      const info = res.info
      $('form .avatar').css('background-image', `url('http://localhost:8080${ info.avatar }`)
      $('form .username').val(info.username)
      $('form .nickname').val(info.nickname)
      $('form .age').val(info.age)
      $('form .gender').find(`option[value='${info.gender}']`).attr('selected', true)
      $('form .desc').html(info.desc)
    }
  }
  
  // 3. 上传头像绑定事件
  $('form input[type=file]').on('change', function () { 
    const fileInfo = this.files[0]
    if (!fileInfo) return 
    if (fileInfo.type.split('/')[0] !== 'image') return
    const fr = new FileReader()
    fr.readAsDataURL(fileInfo)
    fr.onload = res => {
      $('form > label > .avatar').css('background-image', `url(${res.currentTarget.result}`)
    }
  }) 
  
  // 4. 表单绑定提交事件
  $('form').on('submit', async e => {
    e.preventDefault()
    const fm = new FormData($('form')[0])
    fm.append('id', user_id)
    const res = await $.ajax({
      url: 'http://localhost:8080/person/update',
      method: 'PATCH',
      data: fm,
      processData: false,
      contentType: false,
      headers: { 'authorization': token }
    })
    if (res.code === 1) alert('用户信息修改成功')
  })

  // 5. 返回首页
  $('.back').on('click', () => window.location.href = './index.html')
})